<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ZhuaBa - Music</title>

  <!-- begin::global styles -->
  <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
  <!-- end::global styles -->

  <!-- begin::datepicker -->
  <link rel="stylesheet" href="../static/assets/vendors/datepicker/daterangepicker.css">
  <!-- begin::datepicker -->

  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/vendors/vmap/jqvmap.min.css">
  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/css/footer.css" type="text/css">
  <!--<link rel="stylesheet" href="../static/assets/css/header.css" type="text/css">-->
 <link rel="stylesheet" href="../static/assets/css/rankPage.min.css" type="text/css">
 <!-- begin::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
  <link rel="stylesheet" href="../static/assets/css/custom.css" type="text/css">
  <!-- end::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/iconfont.css" type="text/css">
  <link rel="stylesheet" type="text/css" media="screen" href="../static/assets/css/player.css" />

  <script type="text/javascript">
    var days=new  Array ("日", "一", "二", "三", "四", "五", "六");
    function showDT() {
        var currentDT = new Date();
        var y,m,date,day,hs,ms,ss,theDateStr;
        y = currentDT.getFullYear(); //四位整数表示的年份
        m = currentDT.getMonth() + 1; //月
        date = currentDT.getDate(); //日
        day = currentDT.getDay(); //星期
        hs = currentDT.getHours(); //时
        ms = currentDT.getMinutes(); //分
        ss = currentDT.getSeconds(); //秒
        theDateStr = y+"年"+  m +"月"+date+"日 星期"+days[day]+" "+hs+":"+ms+":"+ss;
        document.getElementById("theClock"). innerHTML =theDateStr;
        // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
        window.setTimeout( showDT, 1000);
    }
  </script>
</head>
<body onload="showDT()">

<!-- begin::page loader-->
<div class="page-loader">
  <div class="spinner-border"></div>
  <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- begin::side menu -->
<div class="side-menu">
  <div class='side-menu-body'>
    <ul>
      <!-- 导航栏-->
      <li class="side-menu-divider">欢迎使用</li>
      <li class>
        <a href="/welcome.html"><i class="icon ti-home"></i> <span>历史上的今日</span> </a>
      </li>
      <li class="open">
        <a href="Music.html"><i class="icon ti-paint-bucket"></i> <span>今日热门歌曲</span> </a>
      </li>

      <li><a href="/News.html"><i class="icon ti-rocket"></i> <span>今日热点新闻</span> </a>
      </li>
      <li><a href="/Video.html"><i class="icon ti-crown"></i> <span>今日热门视频</span> </a></li>
      <li><a href="/History.html"><i class="icon ti-files"></i> <span>历史记录</span> </a>
      </li>
    </ul>
  </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
  <div class="container-fluid">

    <div class="header-logo">
      <a href="#">
        <img src="../static/assets/media/image/light-logo.png" alt="...">
        <span class="logo-text d-none d-lg-block">Zhuaba</span>
      </a>
    </div>

    <div class="header-body">
      <ul></ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
            <i class="fa fa-search"></i>
          </a>
        </li>

        <li class="nav-item dropdown">
          <a href="#" data-toggle="dropdown">
            <figure class="avatar avatar-sm avatar-state-success">
              <img class="rounded-circle" src="../static/assets/media/image/avatar.jpg" alt="...">
            </figure>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-divider"></div>
            <a href="/" class="text-danger dropdown-item">登出</a>
            <a href="Person.html" class="text-danger dropdown-item">个人信息</a>
          </div>
        </li>
        <li class="nav-item d-lg-none d-sm-block">
          <a href="#" class="nav-link side-menu-open">
            <i class="ti-menu"></i>
          </a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

  <div class="container-fluid">
    <!-- begin::page header -->
    <div class="page-header d-md-flex justify-content-between align-items-center">
      <div>

        <h4>酷狗TOP22</h4>
        <h4 id="theClock"></h4>
      </div>
    </div>
    <!-- end::page header -->
  </div>
  <div id="Musics" th:text="${Musics}" style="display: none"></div>
  <!-- 播放器 -->
  <div class="music-player" style="color: #0b0b0b">
    <!-- audio标签 -->
    <audio class="music-player__audio" ></audio>
    <!-- 播放器主体 -->
    <div class="music-player__main">
      <!-- 模糊背景 -->
      <div class="music-player__blur"></div>
      <!-- 唱片 -->
      <div class="music-player__disc">
        <!-- 唱片图片 -->
        <div class="music-player__image">
          <img width="100%" src="" alt="">
        </div>
        <!-- 指针 -->
        <div class="music-player__pointer"><img width="100%" src="../static/assets/media/image/cd_tou.png" alt="..."></div>
      </div>
      <!-- 控件主体 -->
      <div class="music-player__controls">
        <!-- 歌曲信息 -->
        <div class="music__info">
          <h3 class="music__info--title">...</h3>
          <p class="music__info--singer">...</p>
        </div>
        <!-- 控件... -->
        <div class="player-control">
          <div class="player-control__content">
            <div class="player-control__btns">
              <div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev"></i></div>
              <div class="player-control__btn player-control__btn--play"><i class="iconfont icon-play"></i></div>
              <div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next"></i></div>
              <div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
            </div>
            <div class="player-control__volume">
              <div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
              <div class="control__volume--progress progress"></div>
            </div>
          </div>

          <!-- 歌曲播放进度 -->
          <div class="player-control__content">
            <div class="player__song--progress progress"></div>
            <div class="player__song--timeProgess nowTime">00:00</div>
            <div class="player__song--timeProgess totalTime">00:00</div>
          </div>

        </div>

      </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="music-player__list">
      <ul class="music__list_content">
        <!-- <li class="music__list__item play">123</li>
        <li class="music__list__item">123</li>
        <li class="music__list__item">123</li> -->
      </ul>
    </div>
  </div>

  <script src="../static/assets/js/utill.js"></script>
  <script src="../static/assets/js/jquery.min.js"></script>
  <script src="../static/assets/js/player.js"></script>

  <div style="text-align:center;margin:-100px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p style="color: #0b0b0b">来源：<a href="https://www.kugou.com/" target="_blank">酷狗音乐</a></p>
  </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="../static/assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="../static/assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="../static/assets/js/examples/charts/chartjs.js"></script>
<script src="../static/assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="../static/assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="../static/assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="../static/assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="../static/assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="../static/assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/custom.js"></script>
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>
</html>